<template>
    <div class="mainV">
        <div class="mainT">
            <i class="el-icon-s-home" @click="openHome"></i>
            <p>预约时段</p>
            <div></div>
        </div>
        <div class="mainVt">{{ info.orgName }} - {{ info.deptName }} - {{ info.doctorName }} - {{ info.date }}</div>
        <div class="mainVc">
            <div class="mainVci" v-for="(i, o) in timeList" :key="o">
                <div class="mainVcit"> {{ i.yyInterval }}</div>
                <div class="mainVcib">
                    <el-button :type="i.status == 0 ? 'success' : 'info'" size="mini" @click="sub(i)">{{ i.status == 0
                        ? '预约' : i.status == 1 ? '已满' : '过期' }}</el-button>
                </div>
            </div>
        </div>
        <el-dialog title="" :visible.sync="dialogVisible" width="70%" :show-close="false">
            <span style="font-size: 18px;">确定预约 {{ info.orgName }} {{ info.deptName }} {{ info.doctorName }} {{
                info.date }}
                {{ info.yyInterval }}
                的问诊？</span>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="cancleOk">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { fetchPost, fetchGet } from '@/api/request'
import moment from 'moment';
export default {
    data() {
        return {
            info: {},
            moment,
            timeList: [],
            dialogVisible: false,
        }
    },
    mounted() {
        this.info = this.$route.query
        fetchGet('/wz/schedule/wzSchedule/getTimeListByDoctor', {
            doctorId: this.info.doctorId,
            date: this.info.date
        }).then(res => {
            this.timeList = this.getMainlist(res.result);
        })
    },
    methods: {
        getMainlist(row) {
            if (this.info.date != this.moment().format('YYYY-MM-DD')) return row;
            row.map(i => {
                if (this.moment(this.info.date + ' ' + i.yyInterval.split('-')[0]) < this.moment()) {
                    i.status = 9
                }
            })
            return row;
        },
        cancleOk() {
            fetchPost('/wz/reserve/wzReserve/addReserve', {
                patientId: JSON.parse(localStorage.getItem('wzPatientInfo')).id,
                scheduleId: this.info.id,
                dept: this.info.dept,
                doctorId: this.info.doctorId,
                orgId: this.info.orgId,
                yyDate: this.info.date,
                yyInterval: this.info.yyInterval,
            }).then(res => {
                if (res.code == 200) {
                    this.dialogVisible = false
                    this.$router.push('/reservation')
                }
                this.$message(res.message)
            })
        },
        openHome() {
            this.$router.push('/search')
        },
        sub(i) {
            if (i.status == 0) {
                this.info.yyInterval = i.yyInterval;
                this.info.id = i.id;
                this.dialogVisible = true;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.mainV {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    

    .mainT {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        line-height: 60px;
        background-color: #fff;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;

        i {
            font-size: 32px;
            color: #67C23A;
            display: inline-block;
            margin-left: 20px;
        }

        p {
            width: 120px;
            text-align: center;
        }

        div {
            margin-right: 20px;
        }
    }

    .mainVt {
        font-size: 20px;
        padding: 10px 20px;
        text-align: center;
        position: fixed;
        background-color: #fff;
        top: 60px;
        left: 0;
    }

    .mainVc {
        padding-top: 140px;

        .mainVci {
            width: 90vw;
            justify-content: space-around;
            display: flex;
            align-items: center;
            margin: 5px 0;
            padding: 5px 0;
            border-bottom: 1px dashed #ccc;
        }
    }
}
</style>